<template>
    <div class="taskDetail"  v-loading="loading" element-loading-text="加载中"
        element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading">
        <div class="title">基础信息</div>
        <el-row :gutter="20" style="margin-bottom:40px">
            <el-col :span="8">
                <div class="descriptions">
                    <div class="descriptions_item">
                        <span>工单编号</span>
                        <span>{{detailForm.workOrderCode}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>工序名称</span>
                        <span>{{detailForm.processName}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>工序状态</span>
                        <span>{{detailForm.processState}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>生产人员</span>
                        <span>{{detailForm.produceUserName}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>报工数</span>
                        <span>{{detailForm.reportNumber}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>良品数</span>
                        <span style="color:rgb(0, 173, 119)">{{detailForm.goodProductNumber}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>不良品数</span>
                        <span style="color:rgb(255, 89, 80)">{{detailForm.badProductNumber}}</span>
                    </div>
                    <div class="descriptions_item bad">
                        <span>不良品项</span>
                        <div class="badProduct">
                            <span v-for="(i,index) in detailForm.list" :key="index" class="box">
                                <span>{{i.name}}</span>
                                <span>{{i.num}}</span>
                            </span>
                        </div>
                    </div>
                    <div class="descriptions_item">
                        <span>工序进度</span>
                        <span>{{detailForm.goodProductNumber}} / {{detailForm.planedNumber}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="descriptions">
                    <div class="descriptions_item">
                        <span>产品编号</span>
                        <span>{{detailForm.productCode}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>产品名称</span>
                        <span>{{detailForm.productName}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>产品规格</span>
                        <span>{{detailForm.productSpecification}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>开始时间</span>
                        <span>{{detailForm.reportStartTime}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>结束时间</span>
                        <span>{{detailForm.reportEndTime}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>报工时长</span>
                        <span>{{detailForm.reportTime}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>标准效率</span>
                        <span>{{detailForm.standardEfficiency}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>实际效率</span>
                        <span>{{detailForm.actualEfficiency}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>达标率</span>
                        <span>{{detailForm.standardRate}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="descriptions">
                    <el-button type="text" class="record" icon="el-icon-s-operation" @click="watchHistory">查看操作记录
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <template>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="title">绩效信息</div>
                </el-col>
                <el-col :span="8">
                    <div class="title">自定义字段信息</div>
                </el-col>
            </el-row>
        </template>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="descriptions">
                    <div class="descriptions_item">
                        <span>计价方式</span>
                        <span>{{detailForm.pricingMethod == 0 ? '计件' : '计时'}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>工资单价</span>
                        <span>{{detailForm.unitPrice}} 元</span>
                    </div>
                    <div class="descriptions_item">
                        <span>预计工资</span>
                        <span>{{detailForm.expectWages}} 元</span>
                    </div>
                    <div class="descriptions_item">
                        <span>审批状态</span>
                        <span>{{detailForm.verifyState}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>审批人</span>
                        <span>{{detailForm.verifyName}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>报工时间</span>
                        <span>{{detailForm.verifyTime}}</span>
                    </div>
                    <div class="descriptions_item" style="text-align:center">
                        <el-button type="primary" size="mini" plain @click="$router.push('/productionManagement/jobBooking')">返回
                        </el-button>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="descriptions">
                    <div :class="['descriptions_item',item.customFieldMess.fieldType]" v-for="(item,index) in detailForm.customFieldList" :key="index">
                        <span>{{item.customFieldMess.chineseName}}</span>
                        <template v-if="item.customFieldMess.fieldType == 'selectRadio'">
                            <span class="colorPicker" 
                                :style="{
                                    color:computedColor(item.customFieldMess.checkBox,false,0),
                                    backgroundColor:computedColor(item.customFieldMess.checkBox,true,0)
                                    }">{{item.value}}</span>
                        </template>
                        <template v-if="item.customFieldMess.fieldType == 'selectChecked'">
                            <span class="colorPicker" v-for="(i,ind) in JSON.parse(item.value)" :key="ind"
                            :style="{
                                    color:computedColor(item.customFieldMess.checkBox,false,ind),
                                    backgroundColor:computedColor(item.customFieldMess.checkBox,true,ind)
                                    }">{{i}}</span>
                        </template>
                        <template v-if="item.customFieldMess.fieldType == 'picture' || item.customFieldMess.fieldType == 'upload'">
                            <div class="imgContainer">
                                <el-image 
                                    v-for="(i,ind) in JSON.parse(item.value)"
                                    style="width: 100px; height: 100px"
                                    fit="scale-down"
                                    :src="$global.uploadUrl + i.url"
                                    :preview-src-list="srcList(JSON.parse(item.value))">
                                </el-image>
                            </div>
                        </template>
                        <template 
                            v-if="item.customFieldMess.fieldType != 'selectRadio' && 
                                item.customFieldMess.fieldType != 'selectChecked' &&
                                item.customFieldMess.fieldType != 'picture' &&
                                item.customFieldMess.fieldType != 'upload'">
                            <span>{{item.value}}</span>
                        </template>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        reportDetail
    } from '@/api/produceController'
    export default {
        data() {
            return {
                detailForm:{
                    workOrderCode: '',
                    processName: '',
                    processState: '',
                    processState: '',
                    reportNumber: '',
                    goodProductNumber: '',
                    badProductNumber: '',
                    productCode: '',
                    productName: '',
                    productSpecification: '',
                    reportStartTime: '',
                    reportEndTime: '',
                    reportTime: '',
                    pricingMethod: '',
                    unitPrice: '',
                    expectWages: '',
                    verifyState: '',
                    verifyName: '',
                    verifyTime: '',
                    list: '',
                    planedNumber: '',
                    customFieldList:[],
                    standardEfficiency:'',
                    actualEfficiency:'',
                    standardRate:'',
                },
                loading:false,
            }
        },
        mounted() {
            this.getReportDetail({
                id: this.$route.query.id
            })
        },
        computed:{
            computedColor(){
                return (checkBox,flag,ind) =>{
                    let parseCheckBox = JSON.parse(checkBox)
                    let rgbaAttr = parseCheckBox[ind].color.match(/[\d.]+/g);
                    return flag ? `rgb(${rgbaAttr[0]},${rgbaAttr[1]},${rgbaAttr[2]},0.1)` : `rgb(${rgbaAttr[0]},${rgbaAttr[1]},${rgbaAttr[2]})`
                }
            },
            srcList(){
                return arr =>{
                    let list = []
                    list = arr.map(i => this.$global.uploadUrl + i.url)
                    return list
                }
            }
        },
        methods: {
            //报工详情
            getReportDetail(data) {
                this.loading = true
                reportDetail(data).then(res => {
                    if (res.code == 200) {
                        for(let key in res.data){
                            this.detailForm[key] = res.data[key]
                        }
                        this.detailForm.customFieldList = res.data.customFieldVos
                    }
                    this.loading = false
                })
            },
            //查看操作记录
            watchHistory() {
                this.$router.push({
                    path: '/productionManagement/jobBooking/operationHistory',
                    query: {
                        code: this.$route.query.code
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .taskDetail {
        padding: 20px;
        overflow: auto;

        .title {
            font-size: 18px;
            color: #1f273d;
        }

        .goBack {
            padding-top: 20px;
            text-align: center;
        }

        .descriptions {

            .record {
                float: right;
            }

            .descriptions_item {
                >span:nth-child(1) {
                    display: inline-block;
                    width: 120px;
                    text-align: right;
                    margin: 10px 20px 10px 0;
                    color: #8e98ae;
                    font-size: 12px;
                }

                span:nth-child(2) {
                    font-size: 12px;
                    color: #1f273d;
                }

                /deep/ .el-button--primary.is-plain{
                    padding: 7px 35px;
                    margin-top: 50px;
                }

                /deep/ .el-button--primary span{
                    margin-left: 0;
                }

                .colorPicker{
                    font-size: 13px;
                    border-radius: 3px;
                    padding: 0 7px;
                    margin-right: 4px;
                }

                .badProduct{
                    display: flex;
                    align-items: center;
                    .box{
                        display: flex;
                        align-items: center;
                        height: 22px;
                        padding: 0 7px;
                        font-size: 12px;
                        border: 1px solid #d3d8e3;
                        border-radius: 2px;
                        background-color: #fafafa;
                        margin-right: 5px;
                        span:nth-child(1){
                            margin-right: 3px;
                        }
                    }
                }
            }

            .descriptions_item.bad{
                display: flex;
            }

            .descriptions_item.picture,.descriptions_item.upload{
                display: flex;
                span:nth-child(1){
                    flex-shrink: 0;
                }
            }

            .imgContainer{
                display: flex;
                flex-shrink: 0;
                width: 330px;
                flex-wrap: wrap;
                /deep/ .el-image{
                    margin-right: 10px;
                    flex-shrink: 0;
                }
            }

            /deep/ .el-image{
                vertical-align: top;
            }
        }

        /deep/ .el-row,
        .el-col {
            height: auto;
        }
    }
</style>